<template>
    
            <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" style="height:600px;overflow-y:scroll;">
               <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill="false">
                    <li class="mui-table-view-cell" v-for="n in list" :key="n.newsId">
                        <router-link :to="'/home/newsinfo/'+n.newsId">
                            <div class="mui-table">
                                <div class="mui-table-cell mui-col-xs-10">
                                    <h4 class="mui-ellipsis">{{n.newsTitle}}</h4>
                                    <p class="mui-h6 mui-ellipsis">
                                    时间： <span>{{n.newsDate | dateFmt('YYYY-MM-DD')}}</span>
                                    点击次数：{{n.readNum}}
                                    </p>
                                </div>
                            </div>
                        </router-link>
                    </li>
               </mt-loadmore>
                
                </ul>

</template>
<script>
import { Toast } from 'mint-ui';
import { Loadmore } from 'mint-ui';
export default {
    data(){
        return {
            list:[],
            current:1,//用来保存当前的页码，默认是第一页
            totalPage:0,
            allLoaded:false,//是否数据加载完毕，如果完毕则是true

        }
    },
    methods:{
        //我们是分页显示新闻
        getNews(){
            this.$ajax({
                url:"/news/"+this.current,
                method:"get"
            }).then(resp=>{
                if(this.current == 1){
                     this.list = resp.data.message;//每次得到的都是一页的数据
                }else{
                     this.list.push(...resp.data.message);
                }
               
                this.totalPage = resp.data.totalPage;
            });
        },
        loadTop(){
            //重新加载第一页的数据就是刷新
            Toast("正在拼命刷新数据。。。。");
            this.current = 1;
            this.getNews();
            this.$refs.loadmore.onTopLoaded();//手动重新刷新
        },
        //上拉加载释放的时候调用的方法
        loadBottom(){
            Toast("正在拼命加载数据。。。。");
            this.current = this.current + 1;
            if(this.current > this.totalPage){
                this.allLoaded = true;
                return Toast("亲，总要有个结尾把。。。。。");
            }
            this.getNews();
        }

    },
    created(){
        //初始化调用
        this.getNews();

    }
}

</script>
<style scoped>

</style>
